<template>
  <div class="app-container">
    <div class="page-card top-tabs">
      <el-tabs v-model="activeTab">
        <el-tab-pane
          v-if="$auth.hasRole('admin')"
          label="整体上传进度"
          name="ztscjd"
        ></el-tab-pane>
        <el-tab-pane label="各校上传进度" name="gxscjd"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="page-card m-top">
      <component
        ref="component"
        v-if="xmxx.id"
        :xmxx="xmxx"
        :kmlb="kmlb"
        :is="activeTab"
      ></component>
    </div>
  </div>
</template>

<script>
import { scanExamSubject } from "@/api/xmgl/smgl";
import ztscjd from "./components/ztscjd.vue";
import gxscjd from "./components/gxscjd.vue";
export default {
  name: "Project_tkcx",
  components: {
    ztscjd: ztscjd,
    gxscjd: gxscjd,
  },
  data() {
    return {
      firstLoad: true,

      xmxx: {},
      activeTab: this.$auth.hasRole("admin") ? "ztscjd" : "gxscjd",
      kmlb: [],
    };
  },
  created() {
    this.$store.dispatch("getXmxx").then((res) => {
      this.xmxx = res;
      if (
        this.$auth.hasRole("admin") ||
        this.$auth.hasExamPermi("reviewing:teachers:tkcx")
      ) {
        scanExamSubject({ examId: this.xmxx.id }).then((res) => {
          this.kmlb = res.data;
        });
      } else if (this.$auth.hasExamPermi("reviewing:teachers:tkcxkm")) {
        this.kmlb = this.$store.state.xmgl.examSubjects.map((item) => {
          return {
            ...item,
            id: item.examSubjectId,
            name: item.examSubjectName,
          };
        });
      }
    });
  },
  activated() {
    if (!this.firstLoad) {
      this.$refs.component.getList();
    }
    this.firstLoad = false;
  },
};
</script>

<style lang="scss" scoped>
</style>